<template>
  <div class="mr-root">
    <div v-if="k" class="not">
      <span>你还没登录，请登录</span>
    </div>
    <div v-if="!k">
      
      <form action="">
        <div class="title">
          <label>标题:</label>
          <input type="text" v-model="topics.title" placeholder="请输入文章标题">
          <label>标签:</label>
          <select v-model="topics.tab" id="">
            <option value="ask" >提问</option>
            <option value="share" >分享</option>
            <option value="job" >招聘</option>
          </select>
        </div>

        <div class="text">
          <textarea v-model="topics.content" id="" cols="30" rows="10" maxlength="100" placeholder="最多一百个字符,暂时不支持添加图片"></textarea>
        </div>
        <button @submit.prevent @click="rel">发布</button>
      </form>
      <p class="err" v-if="p">信息不规范，请认真填写</p>
    </div>
  </div>
</template>
<script>
  import TabBar from "../components/TabBar"
  export default {
    data() {
      return {
        p:false,
        k: true,
        topics: {
          accesstoken:"",
          title: "",
          tab: "",
          content: ""
        },
        tabs: {
          ask: "ask",
          share: "share",
          job: "job"
        }
      }
    },
    components: {
      TabBar
    },
    methods: {
      rel() {
        if(this.topics.title && this.topics.tab && this.topics.content){
          this.p = false
          this.axios.post('http://www.vue-js.com/api/v1/topics/',this.topics)
            .then(data=>{
              console.log(data)
              location.href = '/home'
            })
            .catch(err=>{
              console.log(err)
              
            })
        }else{
          this.p = true
          
        }
      }
    },
    created() {
      if (localStorage.getItem('accesstoken')) {
        this.k = false
        this.topics.accesstoken = localStorage.getItem('accesstoken')
      } else {
        this.k = true
      }
    }
  }

</script>
<style scoped>
  .not {
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #666;
  }
  .err{
    margin-top: 10px;
    color: orange;
    font-size: .7rem;
    text-align: center;
  }
  .title{
    margin-top: 30px;
    text-align: center;
    font-size: .4rem;
  }
  .title input{
    border: 1px solid #ccc;
    height: .7rem;
    padding: 15px;
  }
  textarea{
    outline: none;
    border: none;
    font-size: .3rem;
    width: 100%;
    height: 100%;
    resize: none;
  }
  select{
    outline: none;
  }
  .text{
    border: 1px solid #ccc;
    width: 80%;
    padding: 10px;
    margin: 20px auto;
  }
  button{
    outline: none;
    display: block;
    color: white;
    border: none;
    width: 6rem;
    height: 1rem;
    font-size: .5rem;
    margin: 0 auto;
    background-color: green;
  }
</style>
